<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'

  function back() {
    uni.navigateBack({ delta: 1 })
  }

  const hopeList = ref([])
  const currentPage = ref(1)
  async function getHopeList() {
    const res = await http.request({
      url: '/api/user/mySc',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
      },
    })
    hopeList.value = [...hopeList.value, ...res.data]
  }

  // 取消心愿单
  async function cancelHope(item) {
    const res = await http.request({
      url: '/api/goods/scPost',
      method: 'POST',
      data: {
        id: item.object_id,
        type: item.type,
        box_id: item.box_id,
      },
    })
    if (res.st == 1) {
      hopeList.value = []
      uni.utils.toast('取消成功')
      currentPage.value = 1
      getHopeList()
    } else {
      uni.utils.toast('取消失败')
    }
  }

  function refresh() {
    ++currentPage.value
    getHopeList()
  }

  function goBlindBox(item) {
    if (item.box_type == 1) {
      uni.navigateTo({
        url: `/drawPage/txDraw/index?id=${item.box_id}`,
      })
    } else if (item.box_type == 2) {
      uni.navigateTo({
        url: `/drawPage/wxDraw/index?id=${item.box_id}`,
      })
    }
  }

  function goGoods(item) {
    uni.navigateTo({
      url: `/homePage/goodsinfo/index?id=${item.object_id}`,
    })
  }
  //跳转天选
  function goTX(id) {}
  //跳转无限
  function goWX(id) {}

  onShow(() => {
    currentPage.value = 1
    hopeList.value = []
    getHopeList()
  })
</script>

<template>
  <view class="hope-content">
    <view class="nav-bar">
      <uni-nav-bar left-icon="left" title="心愿单" @clickLeft="back" />
    </view>
    <scroll-view
      scroll-y="true"
      class="scroll-Y"
      style="height: 89vh"
      @scrolltolower="refresh"
    >
      <view class="hope-list">
        <view
          class="hope-list-item"
          v-for="(item, index) in hopeList"
          :key="item.id"
        >
          <view class="item-left">
            <image
              v-if="item.type == 2"
              style="width: 204rpx; height: 204rpx"
              :src="item.box_goods_img"
              mode=""
            ></image>
            <image
              v-if="item.type == 1"
              style="width: 204rpx; height: 204rpx"
              :src="item.goods_img"
              mode=""
            ></image>
          </view>
          <view class="item-right">
            <view class="item-title" v-if="item.type == 2">
              {{ item.box_goods_name }}
            </view>
            <view class="item-title" v-if="item.type == 1">
              {{ item.goods_name }}
            </view>
            <view class="item-bottom">
              <view v-if="item.status == 0" class="delete-left"> 已下架 </view>
              <view
                v-if="item.type == 2 && item.status != 0"
                class="delete-left"
                style="background-color: #b25aff; color: #fff"
                @click="goBlindBox(item)"
              >
                去盲盒
              </view>
              <view
                v-if="item.type == 1 && item.status != 0"
                class="delete-left"
                style="background-color: #f45454; color: #fff"
                @click="goGoods(item)"
              >
                去商城
              </view>
              <view class="delete" @click="cancelHope(item)"> X </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
  .hope-content {
    mim-height: 100vh;
    background: linear-gradient(178deg, #ffe60f -47%, #f5f4fa 23%);
    .nav-bar {
      padding-top: 76rpx;
      ::v-deep .uni-navbar__header {
        background-color: transparent !important;
      }
      ::v-deep .uni-navbar__content {
        background-color: transparent !important;
      }
      ::v-deep .uni-navbar--border {
        border: none !important;
      }
    }
    .hope-list {
      padding: 22rpx;
    }
    .hope-list-item {
      display: flex;
      align-items: center;
      width: 706rpx;
      height: 234rpx;
      padding: 14rpx;
      margin-bottom: 28rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      background-color: #fff;
      .item-left {
        width: 204rpx;
        height: 204rpx;
        margin-right: 26rpx;
        box-sizing: border-box;
        border-radius: 4rpx;
        overflow: hidden;
        flex-shrink: 0;
      }
      .item-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        .item-title {
          width: 100%;
          font-size: 24rpx;
        }
        .item-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .delete-left {
            width: 134rpx;
            height: 40rpx;
            border-radius: 8rpx;
            background-color: #d8d8d8;
            text-align: center;
            line-height: 40rpx;
            font-size: 20rpx;
          }
          .delete {
            width: 38rpx;
            height: 38rpx;
            font-size: 20rpx;
            line-height: 38rpx;
            text-align: center;
            color: #b1b0b8;
          }
        }
      }
    }
  }
</style>
